<template>
	<div class="personal-modification">
	<div class="back">
	   <i class="el-icon-erp-flow backicon" @click="goback"></i>
	   <p>我的资料</p>
	</div>
	  <form class="form">
	     <div class="information">
	     	<label class="name">手机号</label>
	     	<input type="text" v-model="phone"/>
	     </div>
	     <div class="information">
	     	<label class="name">姓名</label>
	     	<input type="text" v-model="name" />
	     </div>
	     <div class="information">
	     	<label class="name">地址</label>
	     	<input type="text" v-model="address" />
	     </div>
	     <div class="information">
	     	<label class="name">等级</label>
	     	<input type="text" v-model="level" readonly=""/>
	     </div>	    
	  </form>
	  <div class="submit" @click="submit">保存</div>
	  <p class="tips">手机号，姓名，地址可以修改!</p>
</div>
</template>

<script>
export default {
	name: 'personal-modification',
	data() {
		return {
			phone: '',
			name: '',
			address: '',
			level: ''
		}
	},
	created () {
		this.getMyselfInforamito()
	},
	mounted() {
		
	},
	methods: {
		//获取个人信息
		getMyselfInforamito() {
			this.$http.get(this.$store.state.reqUrl + '/shopUser/detailInfo', {}).then(res => {
				if(res.status == 200) {
					this.phone = res.data.phoneNo;
					this.name = res.data.userName;
					this.address = res.data.address;
					this.level = res.data.level;
				}
			})
		},
		//返回
		goback() {
			this.$router.go(-1)
		},
		//修改
		submit() {
			if(this.phone == "" || this.phone == null) {
				this.$messagebox.alert("请输入手机号！")
				return false;
			}
			if(this.name == "" || this.name == null) {
				this.$messagebox.alert("请输入姓名！")
				return false;
			}
			if(this.address == "" || this.address == null) {
				this.$messagebox.alert("请输入地址！")
				return false;
			}
			this.$http.put(this.$store.state.reqUrl + '/shopUser', {
				phoneNo: this.phone,
				userName: this.name,
				address: this.address,
			}).then(res => {
				this.$toast({
					message:"修改成功！",
					duration:2000,
					})
				this.$router.go(-1)
			}).catch(res => {
				this.$toast(res.response.data)
			})
		}
	}
}
</script>

<style lang="less" scoped>
    .personal-modification {
    	width:100%;
    	background: #FFFFFF;
    	font-size: 28px;
    	.back{
    		height: 80px;
    		display: flex;
    		margin-bottom: 30px;
    		background: #CD0000;    		
    		.backicon{    			
    			width:80px;
    			line-height: 80px;
    			color: #FFFFFF;
    			text-align: center;
    			font-size: 40px;
    			font-weight: 700;
    		}
    		p{
    			text-align: center;
    			flex: 1;
    			line-height: 80px;
    			font-size: 32px;
    			color: #FFFFFF;
    		}
    	}
    	.form{
    		line-height: 80px;
    		background: #FFFFFF;
    		width:100%;
    		.information{    	
    			margin-bottom: 30px;		
    			width:100%;
    			display: flex;
    			.name{
    				text-align: center;
    				width:150px;
    				line-height: 80px;
    			}
    			input{
    				flex: 1;
    				height: 80px;
    	            border: 1px solid gainsboro;
    	            margin-right:20px;
    	            font-size: 28px;
    			}
    		}   		
    	}
    	.submit{
    			margin:0 auto;
    			height: 80px;
    			width: 150px;
    			background: #66CDAA;
    			color: #FFFFFF;
    			text-align: center;   			
    			line-height: 85px;
    		}
    		.tips{
    			color: #CD0000;
    			padding: 20px 0;
    		}
    }
    
</style>